<template>
    <div class="container process-list">
        <div class="card">
            <div class="card-header">资产筛选</div>
            <div class="card-body">
                <div class="query-criteria clearfix">
                    <el-form :inline="true" :model="assetsSort" class="demo-form-inline f-left">
                        <div class="el-form-item el-form-item--small"><label class="el-form-item__label">请选择</label></div>
                        <el-form-item>
                            <el-select v-model="assetsSort.classify" placeholder="分类">
                                <el-option label="信息设备" value="shanghai"></el-option>
                                <el-option label="安全资产" value="beijing"></el-option>
                                <el-option label="储存设备" value="beijing"></el-option>
                                <el-option label="安全密保产品" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="assetsSort.state" placeholder="资产状态">
                                <el-option label="在用" value="shanghai"></el-option>
                                <el-option label="维修" value="beijing"></el-option>
                                <el-option label="出借" value="shanghai"></el-option>
                                <el-option label="已报废" value="beijing"></el-option>
                                <el-option label="已停用" value="shanghai"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="assetsSort.group" placeholder="部门">
                                <el-option label="部门一" value="shanghai"></el-option>
                                <el-option label="部门二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="assetsSort.secretLevel" placeholder="涉密级别">
                                <el-option label="秘密" value="shanghai"></el-option>
                                <el-option label="机密" value="beijing"></el-option>
                                <el-option label="绝密" value="beijing"></el-option>
                                <el-option label="内部" value="beijing"></el-option>
                                <el-option label="互联网" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model.trim="assetsSort.otherInfo" placeholder="资产编号/资产/ip/mac地址/责任人"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">资产列表</div>
            <div class="card-body">
                <el-table stripe :data="tableData">
                    <el-table-column prop="name" label="资产名字">
                    </el-table-column>
                    <el-table-column prop="number" label="编号">
                    </el-table-column>
                    <el-table-column prop="classfiy" label="类目">
                    </el-table-column>
                    <el-table-column prop="contain" label="所含设备">
                        <template slot-scope="scope">
                            <el-popover trigger="hover" placement="top">
                            <p v-for="item in scope.row.contain" :key="item.index">{{ item.deviceName }}: <span>{{ item.countTotal }}({{ item.unit }})</span></p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">查看设备</el-tag>
                            </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="personLiable" label="责任人">
                    </el-table-column>
                    <el-table-column prop="secretLevel" label="涉密级别">
                    </el-table-column>
                    <el-table-column prop="group" label="所属部门" width="80">
                    </el-table-column>
                    <el-table-column prop="state" label="资产状态">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button @click="assetsDetail(scope.row.assetsId)" type="text" size="small">查看资产</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page-wrap">
                    <el-pagination background layout="prev, pager, next" :total="1000"></el-pagination>
                </div>
            </div>
        </div>
      <!-- 隐藏的删除框 -->
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 隐藏的日志弹出框 -->
      <el-dialog title="该资产操作日志" :visible.sync="dialogLogDegtail" :append-to-body='true'>
        <logDetailTable :assetsId="id"></logDetailTable>
      </el-dialog>
    </div>
</template>

<script>
import logDetailTable from "./components/AsstesLogDetail";
export default {
  name: "AssetsManagement",
  components: {
    logDetailTable
  },
  data() {
    return {
      id: "",
      assetsSort: {
        classify: "",
        state: "",
        group: "",
        secretLevel: "",
        otherInfo: ""
      },
      tableData: [
        {
          name: "网络套件",
          assetsId: "zc0003",
          number: "ZC-000001",
          classfiy: "信息设备",
          contain: [
            {
              deviceName: "CPU",
              deviceId: "SB-000002",
              countTotal: 10,
              unit: "台"
            },
            {
              deviceName: "网络12口模块",
              deviceId: "SB-000002",
              countTotal: 1,
              unit: "台"
            },
            {
              deviceName: "12口交换机",
              deviceId: "SB-000002",
              countTotal: 130,
              unit: "台"
            },
            {
              deviceName: "WIFI扩展器",
              deviceId: "SB-000002",
              countTotal: 4,
              unit: "台"
            }
          ],
          personLiable: "迪丽热巴",
          secretLevel: "绝密",
          group: "人事部",
          state: "维修"
        },
        {
          name: "Java研发用台式机",
          assetsId: "zc0004",
          number: "ZC-000001",
          classfiy: "信息设备",
          contain: [
            {
              deviceName: "CPU",
              deviceId: "SB-000002",
              countTotal: 10,
              unit: "台"
            },
            {
              deviceName: "华硕Z270主板",
              deviceId: "SB-000002",
              countTotal: 1,
              unit: "台"
            },
            {
              deviceName: "内存DDR3 1600",
              deviceId: "SB-000002",
              countTotal: 130,
              unit: "台"
            },
            {
              deviceName: "SSD 硬盘",
              deviceId: "SB-000002",
              countTotal: 4,
              unit: "台"
            }
          ],
          personLiable: "迪丽热巴",
          secretLevel: "绝密",
          group: "人事部",
          state: "维修"
        },
        {
          name: "Java研发用台式机",
          assetsId: "zc0004",
          number: "ZC-000001",
          classfiy: "信息设备",
          contain: [
            {
              deviceName: "CPU",
              deviceId: "SB-000002",
              countTotal: 10,
              unit: "台"
            },
            {
              deviceName: "华硕Z270主板",
              deviceId: "SB-000002",
              countTotal: 1,
              unit: "台"
            },
            {
              deviceName: "内存DDR3 1600",
              deviceId: "SB-000002",
              countTotal: 130,
              unit: "台"
            },
            {
              deviceName: "SSD 硬盘",
              deviceId: "SB-000002",
              countTotal: 4,
              unit: "台"
            }
          ],
          personLiable: "迪丽热巴",
          secretLevel: "绝密",
          group: "人事部",
          state: "维修"
        },
        {
          name: "Java研发用台式机",
          assetsId: "zc0004",
          number: "ZC-000001",
          classfiy: "信息设备",
          contain: [
            {
              deviceName: "CPU",
              deviceId: "SB-000002",
              countTotal: 10,
              unit: "台"
            },
            {
              deviceName: "华硕Z270主板",
              deviceId: "SB-000002",
              countTotal: 1,
              unit: "台"
            },
            {
              deviceName: "内存DDR3 1600",
              deviceId: "SB-000002",
              countTotal: 130,
              unit: "台"
            },
            {
              deviceName: "SSD 硬盘",
              deviceId: "SB-000002",
              countTotal: 4,
              unit: "台"
            }
          ],
          personLiable: "迪丽热巴",
          secretLevel: "绝密",
          group: "人事部",
          state: "维修"
        },
        {
          name: "Java研发用台式机",
          assetsId: "zc0004",
          number: "ZC-000001",
          classfiy: "信息设备",
          contain: [
            {
              deviceName: "CPU",
              deviceId: "SB-000002",
              countTotal: 10,
              unit: "台"
            },
            {
              deviceName: "华硕Z270主板",
              deviceId: "SB-000002",
              countTotal: 1,
              unit: "台"
            },
            {
              deviceName: "内存DDR3 1600",
              deviceId: "SB-000002",
              countTotal: 130,
              unit: "台"
            },
            {
              deviceName: "SSD 硬盘",
              deviceId: "SB-000002",
              countTotal: 4,
              unit: "台"
            }
          ],
          personLiable: "迪丽热巴",
          secretLevel: "绝密",
          group: "人事部",
          state: "维修"
        },
        {
          name: "Java研发用台式机",
          assetsId: "zc0004",
          number: "ZC-000001",
          classfiy: "信息设备",
          contain: [
            {
              deviceName: "CPU",
              deviceId: "SB-000002",
              countTotal: 10,
              unit: "台"
            },
            {
              deviceName: "华硕Z270主板",
              deviceId: "SB-000002",
              countTotal: 1,
              unit: "台"
            },
            {
              deviceName: "内存DDR3 1600",
              deviceId: "SB-000002",
              countTotal: 130,
              unit: "台"
            },
            {
              deviceName: "SSD 硬盘",
              deviceId: "SB-000002",
              countTotal: 4,
              unit: "台"
            }
          ],
          personLiable: "迪丽热巴",
          secretLevel: "绝密",
          group: "人事部",
          state: "维修"
        },
        {
          name: "Java研发用台式机",
          assetsId: "zc0004",
          number: "ZC-000001",
          classfiy: "信息设备",
          contain: [
            {
              deviceName: "CPU",
              deviceId: "SB-000002",
              countTotal: 10,
              unit: "台"
            },
            {
              deviceName: "华硕Z270主板",
              deviceId: "SB-000002",
              countTotal: 1,
              unit: "台"
            },
            {
              deviceName: "内存DDR3 1600",
              deviceId: "SB-000002",
              countTotal: 130,
              unit: "台"
            },
            {
              deviceName: "SSD 硬盘",
              deviceId: "SB-000002",
              countTotal: 4,
              unit: "台"
            }
          ],
          personLiable: "迪丽热巴",
          secretLevel: "绝密",
          group: "人事部",
          state: "维修"
        },
        {
          name: "Java研发用台式机",
          assetsId: "zc0004",
          number: "ZC-000001",
          classfiy: "信息设备",
          contain: [
            {
              deviceName: "CPU",
              deviceId: "SB-000002",
              countTotal: 10,
              unit: "台"
            },
            {
              deviceName: "华硕Z270主板",
              deviceId: "SB-000002",
              countTotal: 1,
              unit: "台"
            },
            {
              deviceName: "内存DDR3 1600",
              deviceId: "SB-000002",
              countTotal: 130,
              unit: "台"
            },
            {
              deviceName: "SSD 硬盘",
              deviceId: "SB-000002",
              countTotal: 4,
              unit: "台"
            }
          ],
          personLiable: "迪丽热巴",
          secretLevel: "绝密",
          group: "人事部",
          state: "维修"
        }
      ],
      dialogVisible: false,
      dialogLogDegtail: false
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    assetsLogDetail(assID) {
      this.id = assID;
      this.dialogLogDegtail = true;
    },
    assetsDetail(assID) {
      this.$router.push({
        path: "/AssetsManagement/MyAssets/MyAssetsDetail" + "?id=" + assID
      });
    },
  },
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    document.body.className = "con-bg";
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    document.body.className = "";
    next();
  }
};
</script>

<style lang="less" scoped>
.query-criteria {
  .el-select {
    width: 120px;
  }
  .fn-btn {
    padding-bottom: 1rem;
    float: right;
  }
}
.process-list {
  padding-top: 120px;
  max-width: 1200px;
  margin: 0 auto;
}
</style>